// Colors
$blue: #29b6f6;
$green: #9ccc65;
$purple: #ba68c8;
$orange: #f57c00;
$red: #ef5350;
$cyan: #4dd0e1;

@mixin text-color($color) {
  color: $color;
}
.template-about-me {
  display: none;
}
.custom-about-template {
  margin-top: 0;
  .about-me-home {
    margin-bottom: 2rem;
    width: 100%;
    height: 100vh;
    background: linear-gradient(45deg, #E91E63, #9C27B0);

    .blue {
      @include text-color($blue);
    }

    .green {
      @include text-color($green);
    }

    .purple {
      @include text-color($purple);
    }

    .cyan {
      @include text-color($cyan);
    }

    .red {
      @include text-color($red);
    }

    .about-me {
      position: relative;
      height: 15rem;
      perspective: 150rem;
      cursor: auto;
      flex: initial;
      &__side {
        height: 15rem;
        transition: all 0.8s ease;

        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        width: 100%;

        backface-visibility: hidden;
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0 1.5rem 4rem rgba(black, 0.4);

        &--front {
          background-color: #1c1c1c;
          z-index: 1;
        }

        &--back {
          transform: rotateY(180deg);
          background-color: #1c1c1c;
          z-index: 0;
        }
      }

      &__cont {
        height: 15rem;
        background-color: #1c1c1c;
        color: #fff;
        font-family: Consolas, "Lucida Console",  monospace;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      &__cta {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        @include text-color(white);

        p {
          margin: 0;
          font-family: Consolas, "Lucida Console",  monospace;

          & > .space {
            margin-left: 2rem;
          }
        }
      }
    }

    .about-me:hover .about-me__side--front {
      transform: rotateY(-180deg);
      z-index: 0;
    }

    .about-me:hover .about-me__side--back {
      transform: rotateY(0deg);
      z-index: 1;
    }
  }
}

@mixin dark-mode {
  .about-me-home {
    background: linear-gradient(45deg, #000, $dark-background-color);
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
